<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .chart {
      width: 100vw;
      height: 100vh;
      background-color: darkblue;
    }
  </style>
</head>
<body>
  <div class="chart">

  </div>
  <script src="./echarts.js"></script>
  <!-- <script src="../data.js"></script> -->
  <script src="./data-err.js"></script>
  <script>
    // console.log(echarts)
    // 初始化echarts实例
    const instance = echarts.init(document.querySelector('.chart'))

   // 指定图表的配置项和数据
    const option = {
      color: [
        {
          type: 'linear',
          x:0,
          y:0,
          x2:0,
          y2:1,
          colorStops:[{
              offset:1,
              color:'#002060'

            },
            {
              offset:0,
              color:'#2aa5f2'
          }],
          global: false
        },
        {
          type: 'linear',
          x:0,
          y:0,
          x2:0,
          y2:1,
          colorStops:[{
              offset:0,
              color:'#de5048'

            },
            {
              offset:1,
              color:'#5a3153'
          }],
          global: false
        },

      ],
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['todo','done'],
        bottom:20
      },
      xAxis: {
        data: data.map(d => d.month),
        axisTick: {
          show: true
        },
        axisLine:{
          lineStyle:{
            color:'black'
          }
        }
      },
      yAxis: {
        splitLine:{
          show:true
        },
        axisLabel: {
          formatter:value => `${Math.floor(value ) }`
        }
      },
       series: [
        {
          name: 'todo',
          type: 'line',
          areaStyle:{},
          data: data.map((d, i) => ({
            // value: d.doneRate,
            value: d.count,
            lable: {
              show: true,
              rotate: 45,
            },
            // itemStyle: i < 3
            itemStyle: d.hasError
            ?{
              color: 'red'
            }
            : undefined,
          }))
        }
      ]
    }

    // 使用刚指定的配置项
    instance.setOption(option)
  </script>
</body>
</html>
